<template>
  <div class="container">
    <!-- <DocDetailSpecialBoxDanger v-model:tableData="data.docCargoDangerList" v-show="data.cargoType=='危险品'" ref="dangerBoxRef"></DocDetailSpecialBoxDanger>
    <docDetailSpecialBoxCold
      v-model:tableData="data.docCargoColdList" v-show="data.cargoType=='冷藏品'"
    ></docDetailSpecialBoxCold>
    <DocDetailSpecialBoxOver v-model:tableData="data.docCargoOverList" v-show="data.cargoType=='超长'"></DocDetailSpecialBoxOver> -->

    <!-- <div class="middle-box">
      <span class="title"> 冷藏品 </span>
    </div>
    <el-row :gutter="64">
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="冷藏湿度">
              <el-input
                style="width: 163.25px"
                v-model="data.bookingMemo"
                :rows="1"
                placeholder="请输入"
              >
              </el-input>
              <selectDown
                style="width: 100px; margin-left: 5px"
                v-model:modelData="data.portDischargeId"
                placeholder="单位"
                urlType="port"
                :option="initOption.xhgOption"
                @getOption="getPortDischargeName"
                @handleChange="portDischargeChange"
                fit-input-width
              >
              </selectDown>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="通风量">
              <el-input
                style="width: 163.25px"
                v-model="data.bookingMemo"
                :rows="1"
                placeholder="请输入"
              >
              </el-input>
              <selectDown
                style="width: 100px; margin-left: 5px"
                v-model:modelData="data.portDischargeId"
                placeholder="单位"
                urlType="port"
                :option="initOption.xhgOption"
                @getOption="getPortDischargeName"
                @handleChange="portDischargeChange"
                fit-input-width
              >
              </selectDown>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <div class="middle-box">
      <span class="title"> 危险品 </span>
    </div>
    <el-row :gutter="64">
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="UN NO">
              <el-input
                v-model="data.bookingMemo"
                :rows="1"
                placeholder="请输入"
                fit-input-width
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="CLASS NO">
              <el-input
                v-model="data.bookingMemo"
                :rows="1"
                placeholder="请输入"
                fit-input-width
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="闪点">
              <el-input
                style="width: 163.25px"
                v-model="data.bookingMemo"
                :rows="1"
                placeholder="请输入"
              >
              </el-input>
              <selectDown
                style="width: 100px; margin-left: 5px"
                v-model:modelData="data.portDischargeId"
                placeholder="单位"
                urlType="port"
                :option="initOption.xhgOption"
                @getOption="getPortDischargeName"
                @handleChange="portDischargeChange"
                fit-input-width
              >
              </selectDown>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <div class="middle-box">
      <span class="title"> OOG </span>
    </div>
    <el-row :gutter="64">
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="尺寸单位">
              <selectDown
                v-model:modelData="data.portDischargeId"
                placeholder="请选择"
                urlType="port"
                :option="initOption.xhgOption"
                @getOption="getPortDischargeName"
                @handleChange="portDischargeChange"
                fit-input-width
              >
              </selectDown>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="超限-右">
              <selectDown
                v-model:modelData="data.portDischargeId"
                placeholder="请选择"
                urlType="port"
                :option="initOption.xhgOption"
                @getOption="getPortDischargeName"
                @handleChange="portDischargeChange"
                fit-input-width
              >
              </selectDown>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="超限-前">
              <el-input
                v-model="data.bookingMemo"
                :rows="1"
                placeholder="请输入"
                fit-input-width
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="超限-高">
              <el-input
                v-model="data.bookingMemo"
                :rows="1"
                placeholder="请输入"
                fit-input-width
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="超限-后">
              <el-input
                v-model="data.bookingMemo"
                :rows="1"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-col>
            <el-form-item label="超限-左">
              <el-input
                v-model="data.bookingMemo"
                :rows="1"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <div class="middle-box">
      <span class="title"> 收发通 </span>
    </div>
    <el-row :gutter="64">
      <el-col :span="8">
        <el-row>
          <el-col>
            <el-form-item label="发货人">
              <el-input
                v-model="data.bookingMemo"
                type="textarea"
                :rows="6"
                placeholder="请填写发货人信息"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-input
                style="width: 417.66px; margin-left: 100px"
                v-model="data.grossWeight"
                placeholder="CONSIGNEE CODE"
                @keydown="parseInput"
                :disabled="checkDisabled"
                fit-input-width
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-input
                style="margin-left: 100px"
                v-model="data.grossWeight"
                placeholder="若需要请填写补充信息"
                @keydown="parseInput"
                :disabled="checkDisabled"
                fit-input-width
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col>
            <el-form-item label="收货人">
              <el-input
                v-model="data.bookingMemo"
                type="textarea"
                :rows="6"
                placeholder="请填写收货人信息"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-input
                style="width: 417.66px; margin-left: 100px"
                v-model="data.grossWeight"
                placeholder="SHIPPER CODE"
                @keydown="parseInput"
                :disabled="checkDisabled"
                fit-input-width
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-input
                style="margin-left: 100px"
                v-model="data.grossWeight"
                placeholder="若需要请填写补充信息"
                @keydown="parseInput"
                :disabled="checkDisabled"
                fit-input-width
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col>
            <el-form-item label="通知人">
              <el-input
                v-model="data.bookingMemo"
                type="textarea"
                :rows="6"
                placeholder="请填写通知人信息"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-input
                style="width: 417.66px; margin-left: 100px"
                v-model="data.grossWeight"
                placeholder="NOTIFY PARTY CODE"
                @keydown="parseInput"
                :disabled="checkDisabled"
                fit-input-width
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-input
                style="margin-left: 100px"
                v-model="data.grossWeight"
                placeholder="若需要请填写补充信息"
                @keydown="parseInput"
                :disabled="checkDisabled"
                fit-input-width
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import { defineComponent } from "vue";
// import docDetailSpecialBoxCold from "./../components/docDetailSpecialBoxCold.vue";
// import DocDetailSpecialBoxDanger from "./../components/docDetailSpecialBoxDanger.vue";
// import DocDetailSpecialBoxOver from "./../components/docDetailSpecialBoxOver.vue";
export default defineComponent({
  components: {
    // docDetailSpecialBoxCold,
    // DocDetailSpecialBoxDanger,
    // DocDetailSpecialBoxOver,
  },
  props: {
    //详细数据
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:detailData"],
  computed: {
    data: {
      get() {
        return this.detailData;
      },
      set(value) {
        this.$emit("update:detailData", value);
      },
    },
  },
  data() {
    return {
      // dangerTableData: {
      //   data: [],
      // },
      // coldTableData: {
      //   data: [],
      // },
      // overTableData: {
      //   data: [],
      // },
    };
  },
  methods: {},
  mounted() {},
});
</script>

<style lang="scss" scoped>

// .el-textarea__inner {
//   line-height: 1.2 !important;
// }
// @media only screen and (max-width: 1800px) {
//   .hwzl {
//     flex: 0 0 30%;
//     max-width: auto;
//   }

//   .kf {
//     flex: 0 0 20%;
//     max-width: auto;
//   }
// }

// @media only screen and (max-width: 1450px) {
//   .hwzl {
//     flex: 0 0 40%;
//     max-width: auto;
//   }

//   .kf {
//     flex: 0 0 10%;
//     max-width: auto;
//   }
// }

// .container {
//   :deep(.el-form-item) {
//     margin: 0;

//     .el-form-item__label {
//       font-size: 12px;
//     }
//   }

//   :deep(.el-row) {
//     margin-bottom: 8px;
//     padding-right: 16px;
//   }

//   :deep(.el-input-number) {
//     width: 100%;

//     .el-input-number__decrease {
//       display: none;
//     }

//     .el-input-number__increase {
//       display: none;
//     }

//     .el-input__inner {
//       text-align: left;
//     }
//   }

//   .middle-box {
//     border-top: 8px solid #f8f8f8;
//     padding: 8px 0;

//     .title {
//       border-left: 4px solid #2867c9;
//       padding-left: 32px;
//       font-size: 16px;
//       font-weight: 600;
//     }

//     .btn {
//       cursor: pointer;
//       color: #0063b9;
//       margin: 0 16px 0 8px;
//     }
//   }
// }

/*
.container {
  :deep(.el-input-number) {
    width: 100%;
    .el-input__inner {
      padding: 0 8px;
      text-align: left;
    }

    .el-input-number__decrease {
      display: none;
    }
    .el-input-number__increase {
      display: none;
    }
  }
  :deep(.el-table) {
    .el-table__header th {
      background-color: #f7f8fa;
    }
  }
}
*/
</style>
